<template>
	<div class="ImageResizerView">
		<el-upload action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res); } " class="avatar-uploader" > <img v-if="imageUrl.length > 1" :src="imageUrl" :style="{ height: imgHeight, width: imgWidth }" />
			<i v-else class="el-icon-plus avatar-uploader-icon" :style="{ height: imgHeight, width: imgWidth }"/>
		</el-upload>
		<el-dialog title="图片剪裁" :visible="dialogVisible" :show-close="false" center :modal-append-to-body="false" width="800px">
			<div class="cropper-content">
				<div class="cropper" style="text-align:center">
					<vueCropper
						ref="cropper"
						:img="option.img"
						:outputSize="option.outputSize"
						:outputType="option.outputType"
						:info="option.info"
						:full="option.full"
						:canMoveBox="option.canMoveBox"
						:original="option.original"
						:autoCrop="option.autoCrop"
						:fixed="option.fixed"
						:autoCropWidth="width"
						:autoCropHeight="height"
						:centerBox="option.centerBox"
						:infoTrue="option.infoTrue"
						:fixedBox="option.fixedBox"
					></vueCropper>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="finish" :loading="loading">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { VueCropper } from 'vue-cropper';
export default {
	name: 'copper',
	components: {
		VueCropper
	},
	props: {
		value: {
			required: true,
			type: String
		},
		width: {
			type: Number,
			default: 636
		},
		height: {
			type: Number,
			default: 658
		},
		resizer: {
			type: Boolean,
			default: true
		},
	},
	data() {
		return {
			imgWidth:this.width/2 +'px',
			imgHeight:this.height/2 +'px',
			dialogVisible: false,
			option: {
				img: '', // 裁剪图片的地址
				info: true, // 裁剪框的大小信息
				outputSize: 1, // 裁剪生成图片的质量
				outputType: 'jpeg', // 裁剪生成图片的格式
				canScale: true, // 图片是否允许滚轮缩放
				autoCrop: true, // 是否默认生成截图框
				autoCropWidth: this.width, // 默认生成截图框宽度
				autoCropHeight: this.height, // 默认生成截图框高度
				fixedBox: true, // 固定截图框大小 不允许改变
				fixed: false, // 是否开启截图框宽高固定比例
				// fixedNumber: [7, 5], // 截图框的宽高比例
				full: false, // 是否输出原图比例的截图
				canMoveBox: true, // 截图框能否拖动
				original: false, // 上传图片按照原始比例渲染
				centerBox: false, // 截图框是否被限制在图片里面
				infoTrue: false // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
			},
			loading: false
		};
	},
	computed: {
		imageUrl() {
			return this.value;
		}
	},
	methods: {
		upload(params) {
			const file = params.file,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt1MB = file.size / 1024 <= 3080;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于3M');
				return;
			}
			this.fileinfo = file;
			let image = new FormData();
			image.append('file[]', file);
			this.$http(this.$ApiList.publicUpload, image).then(res => {
				this.option.img = res.datas[0];
				if(!this.resizer){
					this.$emit('input', res.datas[0]);
					return
				}
				this.dialogVisible = true;
			});
		},
		finish() {
			this.$refs.cropper.getCropBlob(data => {
				var fileName = this.fileinfo.uid + this.fileinfo.name;
				this.loading = true;
				let formdata = new FormData();
				formdata.set('file[]', data, fileName);
				this.$http(this.$ApiList.publicUpload, formdata).then(res => {
					this.$emit('input', res.datas[0]);
					this.loading = false;
					this.dialogVisible = false;
				});
			});
		}
	}
};
</script>

<style lang="scss">
.ImageResizerView {
	.cropper {
		width: auto;
		height: 700px;
	}
	.cropper-crop-box {
		border: 3px dashed #39f;
	}
	.el-dialog {
		border-radius: 10px;
	}
	.el-dialog__header {
		padding: 0;
	}
	.el-dialog__body {
		padding: 10px 10px;
		padding-top: 0;
	}
}
</style>
